<template>
  <el-dialog
    :title="dialogTitle"
    :width="700"
    :append-to-body="false"
    @close="handleClose"
    custom-class="center-detail"
    v-bind="$attrs"
  >
    <div class="row-title">设置安全链接</div>
    <div class="row-wrap link-safe-wrap">
      <el-radio-group v-model="linkType.type">
        <el-radio label="1">公开分享<span class="tip">（任何人获得链接均可访问）</span></el-radio>
        <el-radio label="2"
          >加密分享<span class="tip">（获得链接后需输入密码才可访问）</span></el-radio
        >
      </el-radio-group>
      <div v-if="linkType.type === '2'" class="s-form">
        <div class="s-form-item">
          <div class="s-form-label">
            权限密码<span class="tip">（密码长度为6位，由大小写字母、数字字符组成）</span>
          </div>
          <div class="s-form-content">
            <el-input v-model.trim="linkType.pwd" :maxlength="6" @input="validateLinkPwd" />
          </div>
          <div v-if="linkPwdError" class="error-tip">密码为数字+英文组成、长度为6位</div>
        </div>
      </div>
    </div>
    <div class="row-title">设置链接时效</div>
    <div class="row-wrap link-time-wrap">
      <el-radio-group v-model="linkTime.type">
        <el-radio label="1">永久</el-radio>
        <el-radio label="2">1天</el-radio>
        <el-radio label="3">7天</el-radio>
        <el-radio label="4">30天</el-radio>
        <el-radio label="5">自定义</el-radio>
      </el-radio-group>
      <el-date-picker v-model="linkTime.time" type="date" placeholder="" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button color="#0560FD" type="primary" @click="submit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { createSceneShare } from '@/api/scene';
import { messageUtil } from '@jl/element-plus/utils';
import { dayjs } from 'element-plus';

defineOptions({
  name: 'ShareSetting',
});

interface IProps {
  scene: API.Scene.SceneListItem | null;
}

const props = withDefaults(defineProps<IProps>(), {
  scene: null,
});

const emits = defineEmits(['closeHandle']);

const dialogTitle = ref<string>('分享设置');
const linkType = reactive({
  type: '1',
  pwd: '',
});
const linkTime = reactive({
  type: '1',
  time: '',
});
const linkPwdError = ref<boolean>(false);

function handleClose() {
  emits('closeHandle', false);
}

function validateLinkPwd() {
  linkPwdError.value = !linkType.pwd.match(/^(?=.*\d+)(?=.*[A-Z]+)(?=.*[a-z]+)[\w]{6}$/);
}

function submit() {
  if (linkType.type === '2') {
    validateLinkPwd();
    if (linkPwdError.value) return;
  }
  let expirationTime = '';
  if (linkTime.type === '1') {
    expirationTime = '2030-01-01 00:00:00';
  } else if (linkTime.type === '2') {
    expirationTime = dayjs().add(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  } else if (linkTime.type === '3') {
    expirationTime = dayjs().add(7, 'day').format('YYYY-MM-DD HH:mm:ss');
  } else if (linkTime.type === '4') {
    expirationTime = dayjs().add(30, 'day').format('YYYY-MM-DD HH:mm:ss');
  } else {
    if (!linkTime.time) {
      messageUtil.warning('请输入过期时间');
      return;
    }
    expirationTime = dayjs(linkTime.time).format('YYYY-MM-DD HH:mm:ss');
  }
  createSceneShare({
    data: {
      expirationTime,
      isDelete: 0,
      projectName: props.scene!.projectId,
      shareCode: '',
      shareName: props.scene!.activityName,
      shareStatus: 0,
      shareType: linkType.type === '1' ? 'public' : 'encrypt',
      accessPassword: linkType.pwd,
      accessTimes: 0,
      appId: process.env.VUE_APP_ID,
      resourceCode: props.scene!.activityId,
    },
  }).then(() => {
    emits('closeHandle', true);
  });
}
</script>

<style lang="less" scoped>
.row-title {
  font-size: 16px;
  font-weight: 500;
  color: #585858;
  margin-bottom: 10px;
}
.row-wrap {
  display: flex;
  color: #161616;
  margin-bottom: 20px;

  &.link-safe-wrap {
    flex-direction: column;
    .el-radio-group {
      flex-direction: column;
      align-items: flex-start;
      .el-radio {
        margin-right: 0px;
        .tip {
          color: #9a9a9a;
        }
      }
    }
    .s-form {
      padding-left: 22px;
      &-item {
      }
      &-label {
        height: 32px;
        line-height: 32px;
        .tip {
          color: #9a9a9a;
        }
      }
      &-content {
        display: flex;
        .el-input {
          width: 538px;
          margin-right: 10px;
        }
      }
    }
  }
  &.link-time-wrap {
    .el-radio-group {
      margin-right: 10px;
    }
  }
  &:last-child {
    margin-bottom: 0px;
  }
}
.error-tip {
  color: #f56c6c;
  font-size: 12px;
  padding-top: 2px;
}
</style>
